<template>
    <el-card shadow="never">
        <div style="margin-bottom: 14px;">
            <el-button type="primary" @click="groupFormRef?.openDialog()">添加分组</el-button>
        </div>

        <el-table :data="tableData"
            :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e' }">

            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="name" label="分组" />

            <!-- 如果需要往表格的某一列中加入额外的标签或代码，就需要使用插槽的语法 -->
            <el-table-column label="操作" width="180">
                <!-- scope.row 获取到当前这一行的数据对象 -->
                <template #default="scope">
                    <!-- 点击事件：父组件调用子组件的方法，同时传值给子组件 -->
                    <el-button link type="primary" @click="groupFormRef?.openDialog(scope.row)">
                        修改
                    </el-button>
                    <el-button link type="primary" @click="onDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="flex-end" style="margin-top: 22px;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 20, 40, 100]" background :total="400"
                layout="total, sizes, prev, pager, next, jumper" />
        </div>
    </el-card>

    <!-- 新增、修改 -->
    <GroupForm @onAdd="onAdd" @onUpdate="onUpdate" ref="groupFormRef" />
</template>

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';
import GroupForm from './GroupForm.vue';

type GroupItemType = { id: string, name: string };

const pageData = ref<{ currentPage: number, pageSize: number }>({
    currentPage: 1,  // 当前页码
    pageSize: 20,    // 每页数据条数
})

const tableData = ref<GroupItemType[]>([
    {
        id: '001',
        name: 'A类用户'
    },
    {
        id: '002',
        name: 'B类用户'
    },
    {
        id: '003',
        name: 'C类用户'
    },
    {
        id: '004',
        name: 'D类用户'
    },
])
const groupFormRef = useTemplateRef<any>('groupFormRef');

const onDelete = (deleteId: string) => {

    ElMessageBox.confirm(
        '确定要删除分组吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 点击【确定】按钮
            tableData.value = tableData.value.filter(item => item.id !== deleteId)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            // 点击【取消】按钮
        })
}

const onAdd = (newItem: { name: string }) => {
    tableData.value.push({
        id: Date.now().toString(),
        ...newItem
    })
}

const onUpdate = (newItem: GroupItemType) => {
    tableData.value = tableData.value.map(item => {
        if (item.id == newItem.id) {
            return {
                ...newItem
            }
        }
        return item;
    })
}

</script>

<style scoped></style>